<template>
	<view class="openBox">
		<!-- <header-box :title="pageTitle"></header-box> -->
		<view class="openBox-main" v-if="boxDetail && openBoxType == 1">
			<view class="openBox-detail">
				<view class="openBox-detail-img"><image :src="boxDetail.boxImg" class="openBox-detail-img_s" mode=""></image></view>
				<view class="openBox-detail-nums">
					<view class="openBox-detail-nums-xingk"><text>{{boxDetail.boxName}}</text></view>
					<view class="openBox-detail-nums-shul"><text>数量：{{num}}</text></view>
				</view>
			</view>
			<view class="openBox-btnBox">
				<view class="openBox-btnBox-blues" @click="handleBox"><text>一键开启</text></view>
			</view>
		</view>
		
		<view class="handleBox-main" v-if="openBoxType == 2 && boxList.length>0">
			<view class="headleBox-main-title">
				<image class="headleBox-main-title-icon" src="../../static/img/decorate-left.png" mode=""></image>
				<view class="headleBox-main-title-txt">恭喜你获得</view>
				<image class="headleBox-main-title-icon" src="../../static/img/decorate-right.png" mode=""></image>
			</view>
			<view class="handleBox-main-list">
				
				        <view class="uni-padding-wrap">
				            <view class="page-section swiper">
				                <view class="page-section-spacing">
				                    <swiper class="swiper handleBox-swiper"  :autoplay="autoplay" :interval="interval" :duration="duration">
										<!-- 开一个盲盒没问问题 开多个盲盒有问题  -->
										<swiper-item class="handleBox-swiper-li" v-for="item,index in boxList" :key="index">
										   <view class="swiper_list">
											   <view class="swiper-item">
													<image class="handleBox-swiper-li-img" :src="item.img" mode=""></image>
											   </view>
											   <view class="handleBox-swiper-li-top"><text>{{item.name}}</text></view>
											   <view class="handleBox-swiper-li-bottom"><text>￥{{item.price}}</text></view>
										   </view>
										</swiper-item>
		
				                    </swiper>
				                </view>
				            </view>
				        </view> 				        
			</view>
			<view class="openBox-btnBox">
				<view class="openBox-btnBox-blues" @click="hasCollection"><text>收下{{boxList.length}}个藏品</text></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageTitle:'开盲盒',
				num:1, // 盲盒个数
				boxId:'',
				boxDetail:null,
				openBoxType:1, // 1 显示未开启状态  2 显示已开启状态
				boxList:[],
				autoplay: false,
				interval: 2000,
				duration: 500,
			};
		},
		onLoad(option) {
			if (option.num && option.boxId) {
				this.num = option.num;
				this.boxId = option.boxId;
				this.getGiftBoxDetail()
			} else {
				uni.navigateBack({
					delta:1
				})
			}
		},
		methods:{
			getGiftBoxDetail() {
				this.$api.getGiftBoxDetail({boxId:this.boxId}).then(res => {
					console.log(res)
					if (res.code == 200) {
						this.boxDetail = res.data;
					}
				})
			},
			handleBox() {
				this.$api.openGiftBox({boxId:this.boxId}).then(res => {
					console.log(res)
					if (res.code == 200) {
						this.boxList = res.data;
						this.openBoxType = 2;
					}
				})
				// uni.redirectTo({
				// 	url:`/pages/handleBox/handleBox?num=${this.num}`
				// })
			},
			hasCollection() {
				uni.redirectTo({
					url:'/pages/myCollectionList/myCollectionList?type=3'
				})
			}
		}
	}
</script>

<style lang="less">
	.openBox{
		width: 100%;
		min-height: 100vh;
		background-color: #16181D;
		display: flow-root;
	}
	.openBox-main{
		width: 100%;
		padding:0 32rpx;
		box-sizing: border-box;
		.openBox-detail{
			margin-top: 80rpx;
			width: 100%;
			height: 806rpx;
			background: #262A34;
			border-radius: 20px;
			.openBox-detail-img{
				width: 100%;
				height: 686rpx;
				background: #D8D8D8;
				border-radius: 20px;
				.openBox-detail-img_s{
					width: 100%;
					height: 100%;
					border-radius: 20px;
				}
			}
			.openBox-detail-nums{
				width: 100%;
				color: #FFFFFF;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				font-family: PingFangSC-Medium, PingFang SC, '微软雅黑';
				padding-top: 32rpx;
				.openBox-detail-nums-xingk{
					margin-left: 64rpx;
					font-weight: 500;
					font-size: 32rpx;
					height: 56rpx;
					line-height: 56rpx;
				}
				.openBox-detail-nums-shul{
					margin-right: 48rpx;
					color: #5D5F7A;
					font-size: 28rpx;
					height: 56rpx;
					line-height: 56rpx;
				}
			}
		}
		.openBox-btnBox{
			margin-top: 30rpx;
			width: 100%;
			height: 88rpx;
			border-radius: 25px;
			display: flex;
			justify-content: center;
			.openBox-btnBox-blues{
				width: 231px;
				height: 88rpx;
				line-height: 88rpx;
				background: linear-gradient(223deg, #A339D8 0%, #6948F2 100%);
				border-radius: 25px;
				text-align: center;
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				letter-spacing: 2px;
				
			}
		}
	}
	
	.handleBox-main{
		width: 100%;
		.headleBox-main-title{
			margin-top: 80rpx;
			margin-bottom: 64rpx;
			width: 100%;
			height: 66rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			.headleBox-main-title-icon{
				width: 40rpx;
				height: 40rpx;
			}
			.headleBox-main-title-txt{
				margin: 0 16rpx;
				width: 240rpx;
				height: 66rpx;
				line-height: 66rpx;
				font-size: 48rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 66rpx;
				font-family: PingFangSC-Medium, PingFang SC, '微软雅黑';
			}
		}
		.openBox-btnBox{
			margin-top: 80rpx;
			width: 100%;
			// height: 88rpx;
			height: 100rpx;
			border-radius: 25px;
			display: flex;
			justify-content: center;
			.openBox-btnBox-blues{
				width: 231px;
				height: 88rpx;
				line-height: 88rpx;
				background: linear-gradient(223deg, #A339D8 0%, #6948F2 100%);
				border-radius: 25px;
				text-align: center;
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				letter-spacing: 2px;
			}
		}
		.handleBox-remarks{
			margin-top: 44rpx;
			width: 100%;
			height: 80rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FF6969;
			line-height: 40rpx;
			font-size: 14px;
			display: flex;
			justify-content: center;
			align-items: center;
			.remarks{	
				width: 532rpx;
				height: 80rpx;	
			}
		}
	}
	.handleBox-main-list{
		width: 100%;
		height: 710rpx;	
		.handleBox-swiper{
			height: 710rpx;
			width: 100%;
			background: #16181D;
			.handleBox-swiper-li{
				margin:0 110rpx;
				text-align: center;
				height: 710rpx;
				width: 80% !important;
				overflow: hidden;
				letter-spacing: 2px;
				.swiper_list{
					width:548rpx ;
					background-color: #262A34;
					border-radius: 16px;
					height: 710rpx;
					background-color: #262A34;
				}
				.handleBox-swiper-li-img{
					width: 548rpx;
					height: 548rpx;
					border-radius: 16px;
				}
				.handleBox-swiper-li-top{
					width: 100%;
					margin-top: 18rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC,'微软雅黑';
					color: #FFFFFF;
					font-weight: 400;
				}
				.handleBox-swiper-li-bottom{
					width: 100%;
					margin-top: 16rpx;
					height: 40rpx;
					font-size: 36rpx;
					font-family: PingFangSC-Medium, PingFang SC,'微软雅黑';
					font-weight: 500;
					color: #FFFFFF;
					line-height: 40rpx;
				}
				
			}
		}
	}
	
</style>
